<template>
  <div class="tiaozhuanthree">
      <div class="xiaokuai" v-for="(v, i) in  kapians" :key="i">
          <div class="icontu"></div>
          <div class="icontext">{{v.text}}</div>
          <div class="fuhao">
              <span :class="['iconfont', v.iconhao]"></span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
     data() {
        return {
           kapians:[
               {
                   text:"运动记录",
                   iconhao:"iconfont icon-jiahao"
               },
                 {
                   text:"健康生活",
                   iconhao:"iconfont icon-jiahao"
               },
                

           ] 
        }
    }
}
</script>

<style scoped>
.tiaozhuanthree{
    width: 100%;
    height: 1.2rem;
    margin-top: .2rem;
    background: #fff;
}
.xiaokuai{
        display: flex;
        justify-content: space-between;
       width: 95%;
       height: .6rem;
        margin: auto;
    }
    .icontu{
        display: flex;
        align-items: center;
        justify-content: center;
        width: .6rem;
        height: .6rem;
        font-size: .3rem;
    }
   .icontu .iconfont{
        font-size: .3rem;
    } 
    .icontext{
        width: 2.4rem;
        height: .6rem;
        font-size: .25rem;
        line-height: .6rem;
    }
    .fuhao{
        display: flex;
        align-items: center;
        justify-content: center;
        width: .6rem;
        height: .6rem;
    } 
    .fuhao .iconfont{
        font-size: .2rem;
        border-radius: 50%;
        background: rgb(216, 143, 8);
    } 
</style>